<template>
    <div>
        <li>
            <div v-if="data.id>0" @click="updatepid(data.id)" :class="pid==data.id?'active':''" :id='data.id'>
                {{data.name}}
            </div>
            <ul v-if="data.son && data.son.length>0">
                <reply v-for="son in data.son" :key='son.id' :data='son'/>
            </ul>
        </li> 
    </div>
</template>

<script>
    export default {
        name:'reply',
        props:['data'], 
        data(){
            return{
                pid:0
            }
        },
        methods:{
            // 参数是当前选中的id
            updatepid(pid){
                // 更新父id
                this.pid=pid
                // 取出所有颜色 
                let divlist = document.getElementsByClassName('active')
                for (let i = 0; i < divlist.length; i++) {
                    divlist[i].classList.remove('active')
                    
                }
                // 把当前选中的加上颜色
                var prediv = document.getElementById(pid); 
                prediv.classList.add('active');
                // 存入
                localStorage.setItem('pid',pid)
            }
        },
        
    }
</script>

<style scoped>
.active{
    background-color: rgb(0, 255, 221);
}
</style>